<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按钮样式</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/mycss.css" />
</head>

<body>
<div class="container-fluid" style="height:auto;">
	<h3>常规按钮</h3>
	<div class="row">
    	<div class="col-md-12 margin-top-15">
        	<a class="btn btn-default">按钮1</a>
            <a class="btn btn-primary">按钮2</a>
            <a class="btn btn-success">按钮3</a>
            <a class="btn btn-info">按钮4</a>
            <a class="btn btn-warning">按钮5</a>
            <a class="btn btn-danger">按钮6</a>
        </div>
    </div>
	<h3>Code</h3>
    <div>
    	<pre>
        	<code>
            	<span>&lt;a class="btn btn-default"&gt;按钮1&lt;/a&gt;</span>
                <span>&lt;a class="btn btn-primary"&gt;按钮2&lt;/a&gt;</span>
                <span>&lt;a class="btn btn-success"&gt;按钮3&lt;/a&gt;</span>
                <span>&lt;a class="btn btn-info"&gt;按钮4&lt;/a&gt;</span>
                <span>&lt;a class="btn btn-warning"&gt;按钮5&lt;/a&gt;</span>
                <span>&lt;a class="btn btn-danger"&gt;按钮6&lt;/a&gt;</span>
            </code>
        </pre>
    </div>
    <h4>简要说明</h4>
    <p>代码中没一行都与上面按钮是一一对应，结构都大同小异，唯一不同的样式 <b>btn-*</b>  是为这按钮设置背景颜色，本项目中使用到的按钮请参考 <a href="#">按钮统计页面</a></p>
    <hr />
    <h3>组合按钮</h3>
    <div class="row">
    	<div class="col-md-12">
            <a class="btn btn-success"><span class="glyphicon glyphicon-search"></span>组合按钮</a>
        </div>
     </div>
     <h3>Code</h3>
     <div>
     	<pre>
        	<code>
            	<span>&lt;a class="btn btn-success"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;组合按钮&lt;/a&gt;</span>
            </code>
        </pre>
     </div>
     <h4>简要说明</h4>
     <p>代码与按钮代码基本相同唯一不同是在其中包含了一个&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;, 此段代码的作用是为普通按钮前加一个图标 <span class="glyphicon glyphicon-search"></span>，本项目中使用到的组合按钮请参考 <a href="#">按钮统计页面</a></p>
     <hr />
    <h3>图片按钮</h3>
    <div class="row">
    	<div class="col-md-12">
           <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
        </div>
     </div>
     <h3>Code</h3>
     <div>
     	<pre>
        	<code>
            	<span>&lt;a class="btn btn-success"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/a&gt;</span>
            </code>
        </pre>
     </div>
     <h4>简要说明</h4>
     <p>代码与组合按钮的区别就是将组合按钮中的文字部分去掉，本项目中使用到的图片按钮请参考 <a href="#">按钮统计页面</a></p>
     <hr />
     <h3>设置按钮的大小与禁用</h3>
     <div class="row">
     	<div class="col-md-12">
        	<a class="btn btn-success btn-xs">小按钮</a>
            <a class="btn btn-success btn-sm">中按钮</a>
            <a class="btn btn-success btn-lg">大按钮</a>
            <a class="btn btn-success" >默认大小</a>
            <a class="btn btn-success" disabled>禁用按钮</a>
        </div>
     </div>
     <h3>Code</h3>
     <div>
     	<pre>
        	<code>
                <span>&lt;a class="btn btn-success btn-xs"&gt;小按钮&lt;/a&gt;</span>
                <span>&lt;a class="btn btn-success btn-sm"&gt;中按钮&lt;/a&gt;</span>
                <span>&lt;a class="btn btn-success btn-lg"&gt;大按钮&lt;/a&gt;</span>
                <span>&lt;a class="btn btn-success" &gt;默认大小&lt;/a&gt;</span>
                <span>&lt;a class="btn btn-success" disabled&gt;禁用&lt;/a&gt;</span>
            </code>
        </pre>
     </div>
     <h4>简要说明</h4>
     <p>如上所示，每个按钮都是在设置背景颜色后的参数不同，</p>
</div>

</body>
</html>
